<template>
	<div id="user-register-view">
		<h2 class="title">Tao牌共享图库网 - 注册</h2>
		<div class="desc">企业级智能协同云图库</div>
		<a-form :model="formState" name="basic" autocomplete="off" @finish="handleSubmit">
			<a-form-item
				name="userAccount"
				:rules="[
					{ required: true, message: '请输入账号!' },
					{ min: 4, message: '账号长度不能少于4位!' },
				]"
			>
				<a-input v-model:value="formState.userAccount" placeholder="请输入账号" />
			</a-form-item>

			<a-form-item
				name="userPassword"
				:rules="[
					{ required: true, message: '请输入密码!' },
					{ min: 8, message: '密码长度不能少于8位!' },
				]"
			>
				<a-input-password v-model:value="formState.userPassword" placeholder="请输入密码" />
			</a-form-item>

			<a-form-item
				name="userCheckPassword"
				:rules="[
					{ required: true, message: '请输入确认密码!' },
					{ min: 8, message: '密码长度不能少于8位!' },
				]"
			>
				<a-input-password v-model:value="formState.checkPassword" placeholder="请输入确认密码" />
			</a-form-item>

			<div class="tips">
				已有账号？
				<router-link to="/user/login">去登录</router-link>
			</div>

			<a-form-item>
				<a-button type="primary" html-type="submit" style="width: 100%" @click="handleSubmit(formState)">注册</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>
<script setup lang="ts">
import { useRegisterUsingPost } from '@/api/userController'
import router from '@/router'
import { message } from 'ant-design-vue'
import { reactive } from 'vue'

// 用户表单数据类型定义
const formState = reactive<API.UserRegisterRequest>({
	userAccount: '',
	userPassword: '',
	checkPassword: '',
})

// 提交表单
const handleSubmit = async (values: API.UserRegisterRequest) => {
	// 校验密码是否一致
	if (values.userPassword !== values.checkPassword) {
		message.error('两次输入的密码不一致，请重新输入！')
		return
	}
	const res = await useRegisterUsingPost(values)
	if (res.data.code === 0 && res.data.data) {
		message.success('注册成功！')
		router.replace('/user/login')
	} else {
		message.error('注册失败！' + res.data.message)
	}
}
</script>

<style scoped lang="scss">
#user-register-view {
	max-width: 360px;
	margin: 0 auto;

	.title {
		text-align: center;
		margin-bottom: 16px;
	}

	.desc {
		text-align: center;
		color: #bbb;
		margin-bottom: 16px;
	}

	.tips {
		color: #bbb;
		text-align: right;
		font: 13px;
		margin-bottom: 16px;
	}
}
</style>
